<template>
    <div>
        <el-row>
            <el-col :span="24">
                <el-card class="">
                    <template #header>
                        <div class="card-header">
                            <h3>账单明细</h3>
                        </div>
                    </template>
                    <el-table :data="order_detail.order_details" style="width: 100%">
                        <el-table-column prop="time_range" label="时间范围">
                            <template #default="scope">
                                <div style="display: flex; flex-direction: column;">
                                    <span>{{ scope.row.time_range }}</span>
                                    <span>{{ parseTime(scope.row.create_time) }}</span>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="electricity_amount_unit" label="电费单价(元)" />
                        <el-table-column prop="service_amount_unit" label="服务费单价(元)" />
                        <el-table-column prop="electric_quantity" label="充电电量(度)" />
                        <el-table-column prop="total_amount" label="总费用(元)" />
                        <el-table-column prop="electricity_amount" label="总电费(元)" />
                        <el-table-column prop="service_amount" label="总服务费(元)" />
                    </el-table>
                </el-card>
            </el-col>
        </el-row>
        <el-row class="mt10">
            <el-col :span="24">
                <el-card class="">
                    <template #header>
                        <div class="card-header">
                            <h3>扣费明细</h3>
                        </div>
                    </template>
                    <el-table :data="order_detail.xf_info" style="width: 100%">
                        <el-table-column prop="type" label="账单类型" />
                        <el-table-column prop="id" label="账单ID" />
                        <el-table-column prop="price" label="充值金额" />
                        <el-table-column prop="kf_price" label="扣费金额" />
                        <el-table-column prop="create_time" label="扣费时间" />
                    </el-table>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script >
 export default {
   name: 'Billing',
   components: {  },
   props: {
     order_detail: {
       type: Object
     },
   },
   data() {
     return {

     };
   },
   mounted(){

   },
   methods: {

   }
 }
</script>

<style scoped>

</style>
